import React, { Component } from 'react';
import { connect } from 'react-redux';
import { 
  List, 
  SearchBar, 
  PullToRefresh, 
  Empty,
  Button,
  Toast
} from 'antd-mobile';
import { SearchOutline, ExclamationCircleOutline } from 'antd-mobile-icons';
import { 
  fetchTeams, 
  searchTeams, 
  setSearchTerm, 
  clearSearch 
} from '../../store/reducers/teamSlice';
import styles from './TeamList.module.less';

class TeamList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
    };
  }

  componentDidMount() {
    this.loadTeams();
  }

  loadTeams = () => {
    const { dispatch } = this.props;
    dispatch(fetchTeams());
  };

  handleSearch = (value) => {
    const { dispatch } = this.props;
    dispatch(setSearchTerm(value));
    
    if (value.trim()) {
      dispatch(searchTeams(value));
    } else {
      dispatch(fetchTeams());
    }
  };

  handleClearSearch = () => {
    const { dispatch } = this.props;
    dispatch(clearSearch());
    dispatch(fetchTeams());
  };

  handleRefresh = async () => {
    this.setState({ refreshing: true });
    try {
      await this.loadTeams();
    } finally {
      this.setState({ refreshing: false });
    }
  };

  handleTeamClick = (team) => {
    Toast.show(`点击了球队: ${team.name}`);
    // 这里可以跳转到球队详情页或显示详情弹窗
  };

  handleRetry = () => {
    this.loadTeams();
  };

  renderTeamItem = (team) => {
    return (
      <List.Item
        key={team.id}
        onClick={() => this.handleTeamClick(team)}
        className={styles.teamItem}
      >
        <div className={styles.teamContent}>
          <div className={styles.teamAvatar}>
            <div className={styles.avatarText}>
              {team.name.charAt(0)}
            </div>
          </div>
          <div className={styles.teamInfo}>
            <div className={styles.teamName}>{team.name}</div>
            <div className={styles.teamId}>ID: {team.id}</div>
          </div>
          <div className={styles.teamAction}>
            <SearchOutline className={styles.actionIcon} />
          </div>
        </div>
      </List.Item>
    );
  };

  renderEmpty = () => {
    const { searchTerm } = this.props;
    
    return (
      <Empty
        className={styles.empty}
        image={<SearchOutline style={{ fontSize: 64, color: '#999' }} />}
        description={
          <div className={styles.emptyContent}>
            <div className={styles.emptyText}>
              {searchTerm ? '没有找到相关球队' : '暂无球队数据'}
            </div>
            {searchTerm && (
              <Button 
                size="small" 
                onClick={this.handleClearSearch}
                className={styles.clearButton}
              >
                清空搜索
              </Button>
            )}
          </div>
        }
      />
    );
  };

  renderError = () => {
    return (
      <div className={styles.errorContainer}>
        <Empty
          image={<ExclamationCircleOutline style={{ fontSize: 64, color: '#ff3141' }} />}
          description="加载失败，请重试"
        />
        <Button 
          color="primary" 
          onClick={this.handleRetry}
          className={styles.retryButton}
        >
          重新加载
        </Button>
      </div>
    );
  };

  render() {
    const { 
      filteredTeams, 
      loading, 
      error, 
      searchTerm 
    } = this.props;
    const { refreshing } = this.state;

    if (error) {
      return (
        <div className={styles.container}>
          {this.renderError()}
        </div>
      );
    }

    return (
      <div className={styles.container}>
        <div className={styles.header}>
          <SearchBar
            placeholder="搜索球队名称"
            value={searchTerm}
            onChange={this.handleSearch}
            onClear={this.handleClearSearch}
            className={styles.searchBar}
            showCancelButton
          />
        </div>

        <div className={styles.content}>
          <PullToRefresh
            onRefresh={this.handleRefresh}
            refreshing={refreshing}
          >
            <List className={styles.teamList}>
              {filteredTeams.length > 0 ? (
                filteredTeams.map(team => this.renderTeamItem(team))
              ) : (
                <List.Item>
                  {this.renderEmpty()}
                </List.Item>
              )}
            </List>
          </PullToRefresh>
        </div>

        {loading && !refreshing && (
          <div className={styles.loading}>
            <div className={styles.loadingText}>加载中...</div>
          </div>
        )}
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  teams: state.teams.teams,
  filteredTeams: state.teams.filteredTeams,
  searchTerm: state.teams.searchTerm,
  loading: state.teams.loading,
  error: state.teams.error,
});

export default connect(mapStateToProps)(TeamList);
